<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <!-- 
        
    颜色渐变：
    需要在series中的对象中添加配置结点，在需要配置的对象上添加itemStyle这个配置对象，配置对象上有一个color的配置结点是一个对象

    线性渐变：
    在color这个配置对象上指定他的类型为linear
    配置渐变的位置坐标
    x ,y , x2 , y2
    配置不同位置的色差比值colorStops:[{offset:0 ，color：'red'// 配置百分之0处的颜色为红色}，{offset：1，color:'blue'}]
    位置是从上往下的

    径向渐变：
        需要将type改变成radial，坐标位置全部需要改变  只有 x, y, r

     -->
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>
</body>
<script>
    var mCharts =echarts.init(document.querySelector('div'))

    var option = {
        // 通用配置title
        title:{
            text:'成绩展示',
            // 文字样式
            textStyle:{
                color:'red',
                fontStyle:'oblique'
            },
            // 标题边框
            borderWidth:5,
            borderColor:'blue',
            borderRadius:5,
            left:0
        },
        // 通用配置tooltip
        tooltip:{
            trigger:'item',
            triggerOn:"mousemove",
            formatter:'{b}的{a}成绩是：{c}'
            // formatter:function(arg){
            //     // console.log(arg);
            //     return "hahah "
            // }
        },
        // 通用配置toolbox（能够下载图片等功能）
        toolbox:{
           feature:{
            // 保存图片
            saveAsImage:{},
            // 数据视图
            dataView:{},
            // 重置数据
            restore:{},
            // 区域缩放
            dataZoom:{},
            // 动态图表的切换
            magicType:{
                type:['line','bar']
            }
           }
        },
        xAxis:{
            type:'category',
            data:['小明','小红','小王']
        },
        yAxis:{
            type:'value'
        },
        series:[
            {
                name:'语文',
                type:'bar',
                data:[70,50,90],
                // 设置最大和最小值
                markPoint:{
                    data:[
                        {
                            type:'max',name:'最大值'
                        },
                        {
                            type:"min",name:'最小值'
                        }
                    ]
                },
                // 展示平均值
                markLine:{
                    data:[
                    {
                        type:'average',name:'平均值'
                    }
                    ]  
                },
                // 显示数值
                label:{
                    show:true,
                    // 旋转
                    rotate:50,
                    position:'top'
                },
                // 对柱的宽高进行展示
                barWidth:'30',
                itemStyle:{
                    color:{
                        type:'linear',
                        x:0,
                        y:0,
                        x2:0,
                        y2:1,
                        colorStops:[
                            {offset:0,color:'red'},
                            {offset:1,color:'blue'}
                        ]
                    }
                }
            },
            {
                name:'数学',
                type:'bar',
                data:[50,60,30],
                // 对柱的宽高进行展示
                barWidth:'30',
                itemStyle:{
                    color:{
                        type:'radial',
                        x:0.5,
                        y:0.5,
                        r:0.5,
                        colorStops:[
                            {offset:0,color:'red'},
                            {offset:1,color:'blue'}
                        ]
                    }
                }
            }
        ]
    }
mCharts.setOption(option)
</script>
</html>